<template>
    <div class="css-demo03">

        <div class="loop-image-container">
            <img src="../../assets/one.jpeg" alt="" class="loop-image">
            <img src="../../assets/two.jpeg" alt="" class="loop-image">
            <img src="../../assets/three.jpeg" alt="" class="loop-image">
            <img src="../../assets/five.jpeg" alt="" class="loop-image">
<!--                        <img src="../../assets/five.jpeg" alt="" class="loop-image">-->
        </div>
    </div>

</template>

<script>
    export default {
        name: "css-demo03",
        data() {

        },
        methods: {}

    }
</script>

<style lang="scss">
    $basic-width: 350px;
    $basic-height: 350px;


    .css-demo03 {
        position: relative;
        width: $basic-width;
        height: $basic-height;
        margin: 100px auto;
        overflow: hidden;

        .loop-image-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 400%;
            height: 100%;
            transform: translate(0, 0);
            /*
            * 1.animation-name：用于指定@keyframes 动画的名称
            * 2.animation-duration：定义一个动画周期的时长，一共五张图片，各分两秒
            * 3.animation-timing-function：定义动画的节奏，默认值为ease，linear为平滑效果，
            * 4.animation-delay:用于将动画延迟执行
            * 5.animation-iteration-count：定义循环播放动画的次数，默认为1   infinate表示无限循环，不可以为负数，可以为小数，
            *
            */
            animation: loop 8s linear infinite;


            .loop-image {
                width: $basic-width;
                height: $basic-height;

            }

            @keyframes loop {
                0% {
                    transform: translate(0, 0);
                }
                25% {
                    transform: translate(0, 0);
                }
                /* 停留1500ms */

                30% {transform: translate(-25%, 0);} /* 切换500ms 位移-20% */

                50% {transform: translate(-25%, 0);}

                60% {transform: translate(-50%, 0);}
                75% {transform: translate(-50%, 0);}

                80% {transform: translate(-75%, 0);}
                95% {transform: translate(-75%, 0);}

                100% {
                    transform: translate(-100%, 0);
                }
                /* 重新循环第一张 */
            }

        }


    }


</style>
